<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
           // $.getJSON("js/admin.json",{},function (data) {
           //    let t=$("#dataTable");
           //    $.each(data,function (i,obj) {
           //      t.append("<tr><td>"+obj.id+"</td><td>"+obj.loginname+"</td><td>"+obj.realname+"</td><td>"+obj.email+"</td></tr>");
           //    });
           // });
            var pageNo=1;

            $("#pager a").click(function () {
                pageNo=$(this).attr("data-page");
                doLoad();
                return false;//链接失效
            });
            $("#btnSearch").click(
                function () {
                    pageNo=1;
                    doLoad();
                }
            );
            $("#btnGo").click(function () {
                pageNo=$("#goNum").val();
                doLoad();
            });
            $("#dataTable").on("click","tr a#del",function (){
                let id=$(this).attr("uid");
                $.post("delete.do",{id:id},function (re) {
                   if(re.success){
                       alert("删除成功");
                       doLoad();
                       return;
                   }
                   alert("删除失败："+re.msg);
                });
                return false;
            });
            //加载数据
            function doLoad(){
                let realname=$("#realname").val();
                let loginname=$("#loginname").val();
                $.getJSON("admin/search",{pageNo:pageNo,realname:realname,loginname:loginname},function (p) {
                    let t=$("#dataTable");
                    t.find("tr:gt(0)").remove();//找到下级的tr的索引大于0的
                    $("#pager a#prev").attr("data-page",p.page-1);
                    $("#pager #goNum").val(p.page);
                    $("#pager a#next").attr("data-page",p.page+1);
                    console.log(p.page+1,">>>>>>>>>>>>>>>");
                    $("#pager a#last").attr("data-page",p.pageNums);
                    $.each(p.data,function (i,obj) {
                        t.append("<tr><td>"+obj.id+"</td><td>"+obj.loginname+"</td><td>"+obj.realname+"</td><td>"+obj.email+"</td><td><a href='#' id='del' uid='"+obj.id+"'>删除</a></td></td></tr>");
                    });
                });
            }
            doLoad();
        });
    </script>
</head>
<body>
<p>
    <input type="search" id="loginname" placeholder="登录名"/>
    <input type="search" id="realname" placeholder="姓名"/>
    <button id="btnSearch">搜索</button>
</p>
  <table width="70%" id="dataTable" border="1" cellspacing="0" cellpadding="0">
      <tr>
          <th>编号</th>
          <th>登录名</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>操作</th>
      </tr>
  </table>
<p id="pager">
    <a href="#" data-page="1">首页</a>
    <a href="#" id="prev">上一页</a>
    <input type="number" id="goNum" size="4"/><button type="button" id="btnGo">Go</button>
    <a href="#" id="next">下一页</a>
    <a href="#" id="last">尾页</a>
</p>
</body>
</html>